<template>
  <div class="days-lsit" ref="daysListref">
    <icon-caret-left @click="changeDateList('prev')" class="icon-change" :size="18" />
    <div
      class="days-item"
      v-for="item in computedTimeSliderList"
      :key="item.day"
      :class="{ 'active-item': modelValue && format(item.value, 'yyyy-MM-dd') === format(modelValue, 'yyyy-MM-dd') }"
      @click="handleClickItem(item)"
    >
      <div class="days-item-days">{{ item.day }}</div>
      <div class="days-item-label">{{ item.label }}</div>
    </div>
    <icon-caret-right @click="changeDateList('next')" class="icon-change" :size="18" />
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { add, startOfWeek, getDate, setDate, getDay, format, subWeeks, addWeeks, eachDayOfInterval } from 'date-fns'
const props = defineProps({
  modelValue: {
    type: Date,
    default: new Date()
  }
})
const emits = defineEmits(['update:modelValue'])
const computedTimeSliderList = computed(() => {
  const start = startOfWeek(props.modelValue || new Date(), { weekStartsOn: 1 }) //获取当前日期所在周一
  let arr = []
  let label = ''
  for (let i = 0; i < 7; i++) {
    let curDay = add(start, { days: i })
    let day = getDay(curDay)
    switch (day) {
      case 1:
        label = '周一'
        break
      case 2:
        label = '周二'
        break
      case 3:
        label = '周三'
        break
      case 4:
        label = '周四'
        break
      case 5:
        label = '周五'
        break
      case 6:
        label = '周六'
        break
      case 0:
        label = '周日'
        break
      default:
        break
    }
    arr.push({
      day: format(curDay, 'M/d'),
      label,
      value: curDay
    })
  }
  return arr
})
const handleClickItem = (day) => {
  emits('update:modelValue', day.value)
}
const changeDateList = (type) => {
  if (type == 'prev') {
    emits('update:modelValue', subWeeks(props.modelValue || new Date(), 1))
  } else {
    emits('update:modelValue', addWeeks(props.modelValue || new Date(), 1))
  }
}
</script>

<style lang="scss" scoped>
.days-lsit {
  width: 100%;
  display: flex;
  align-items: center;
  overflow: overlay;
  height: 50px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .icon-change {
    cursor: pointer;
  }
  .days-item {
    width: 40px;
    height: 50px;
    flex-shrink: 0;
    margin: 0 5px;
    text-align: center;
    padding: 6px 0;
    box-sizing: border-box;
    color: #333333;
    cursor: pointer;
    .days-item-label {
      font-weight: 500;
      font-size: 10px;
      margin-top: 16px;
    }
    .days-item-days {
      font-weight: bold;
      font-size: 12px;
    }
  }
  .active-item {
    background-color: rgb(var(--blue-1));
    color: rgb(var(--blue-6));
  }
}
</style>
